<template>
    <div class="header flex mb-20 pt-20">
        <div class="user" @click="$router.push('/userCenter')"><img :src="require(`@/assets/theme/${THEME}/image/Group.png`)" alt=""></div>
        <div class="styleWh tabBackground h-60 rounded-full flex items-center">
            <img src="@/assets/image/icon-search.png" alt="logo" class="w-32 h-32 mx-16" />
            <input type="text" v-model="keywords" :placeholder="$t('搜索币种')" class="h-full flex-1 border-none bg-none textColor"
                @input="onInput" />
        </div>
        <div class="custom" @click="$router.push('/customerService')"><img src="@/assets/image/customer.png" alt="">
        </div>
    </div>
</template>

<script>
import { THEME } from '@/config/theme'
    export default {
        props: {

        },
        components: {

        },
        data(){
            return {
                THEME,
                keywords:'',
                inputTimeout: null,
                active: 1,
                tabList: [
                    { id: 1, text: this.$t('自选'), data: [], loading: true },
                    { id: 2, text: this.$t('现货'), data: [], loading: true },
                    { id: 3, text: this.$t('合约'), data: [], loading: true }
                ],
            }
        },
        methods: {
            onInput() { // 输入
                if (this.inputTimeout) {
                    clearTimeout(this.inputTimeout)
                    this.inputTimeout = null
                }
                this.inputTimeout = setTimeout(() => {
                    this.getFilterData()
                }, 50)
            },
            getFilterData() { // 过滤后的数据
                const index = this.active / 1 - 1
                //console.log(index)
                this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords))
            },
        }
    }
</script>

<style lang="scss" scoped>
.header{
    height:72px ;
    display: flex;
    justify-content: center;
    align-items: center;
    .user{
        width: 66px;
        height: 66px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .custom{
        width: 44px;
        height: 44px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.styleWh{
    margin-left: 22px;
    margin-right: 26px;
    flex: 1;
}
</style>